<template>
<div class="user">
  <div @click="dialogVisible = true">
  <slot name="login-btn"></slot>
  </div>
  <el-dialog
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :append-to-body="true"
      width="25%"
  >
    <el-form ref="loginForm" :model="form" :rules="rules">
      <h3 class="login-title">Login</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" v-on:click="zhuce">注册</el-button>
      <el-button type="primary" :plain="true" v-on:click="onSubmit('loginForm')">登录</el-button>
<!--      <el-button @click="dialogVisible = false">取 消</el-button>-->
<!--      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>-->
    </div>
  </el-dialog>
</div>
</template>

<script>
    export default {
      name: "Login",
      data() {
        return {
          form: {
            username: '',
            password: ''
          },
          rules: {
            username: [
              {required: true, message: '账号不可为空', trigger: 'blur'}
            ],
            password: [
              {required: true, message: '密码不可为空', trigger: 'blur'}
            ]
          },

          dialogVisible: false
        }
      },
      created(){
        // this.verifyUser();
      },
      methods: {
        verifyUser(){

        },
        zhuce(){
          this.dialogVisible = false;
          this.$store.commit('show', {
            dialogVisible: true,
          });
        },
        onSubmit(formName) {
          // 为表单绑定验证功能
          this.$refs[formName].validate((valid) => {
            if (valid) {

              this.$axios.get('user/login', {
                params: {
                  username: this.form.username,
                  password: this.form.password
                }
              }).then(res => {
                console.log(res);
                  if(res.data.code != 200){
                    this.dialogVisible = true;
                    console.log("登陆失败");
                    this.$message({
                      message: "登陆失败",
                      type: 'warning'
                    });
                    // return false;
                  }else {
                    this.$message({
                      message: res.data.msg,
                      type: 'success'
                    });
                    this.$router.push("/Mine");
                    console.log("登录成功");
                  }
              });
            }
          });
        },
        handleClose() {
          this.dialogVisible = false;
        }
      }
    }
</script>

<style scoped>
.login-title {
  text-align: center;
  margin: 0 auto 40px auto;
  font-size: 30px;
  font-weight: 400;
  color: #D6B3E3;
}
.user>>>el-input {
  border-bottom:0;
}
.dialog-footer {
  text-align: center;
}
</style>
